<template>
  <div class="alarm-scheme pd-20 flex-column h-100P">
    <el-form :model="formData" inline>
      <el-from-item label="应用场景" prop="">
        <SelectApplicationScenario @change="({id}={id:''})=>formData.sceneId=id" />
      </el-from-item>
      <el-form-item>
        <el-input
          v-model="formData.keyword"
          style="width: 350px;"
          suffix-icon="el-icon-search"
          placeholder="请输入分组名称或ID"
        />
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="info" :loading="loading" @click="findGroupPageByParam">
          查询
        </el-button>
      </el-form-item>
    </el-form>
    <AddButton title="新建分组" @click="dialogVisible=true" />
    <div class="flex-sub table-container">
      <el-table
        v-loading="loading"
        :data="tableData"
        height="98%"
        header-cell-class-name="table-header-cell"
        header-row-class-name="table-header-row"
        class=" flex-sub"
      >
        <el-table-column prop="name" label="方案名称" />
        <el-table-column prop="id" label="应用场景" />
        <el-table-column prop="deviceNums" label="算法任务" />
        <el-table-column prop="deviceNums" label="通知方式" />
        <el-table-column prop="deviceNums" label="备注说明" />
        <el-table-column fixed="right" label="操作" width="150px" align="center">
          <template slot-scope="{row}">
            <div class="justify-center">
              <div class="btn-edit" @click="handleEdit(row)">修改</div>
              <div class="pd-lr-10 fz-14" style="color: #333;">|</div>
              <div class="btn-delete" @click="handleDelete(row)">删除</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination
      hide-on-single-page
      background
      layout="prev, pager, next, total, jumper"
      :total="formData.total"
      :page-size="formData.pageSize"
      @current-change="handlePageNoChange"
    />
    <CreateOrUpdate
      title="新建分组"
      :visible.sync="dialogVisible"
      :value="updateGroup"
      @change="handleChange"
    />
  </div>
</template>

<script>
import AddButton from '@/components/add-button/index'
import { apiDelGroupById, apiFindGroupPageByParam } from './api'
import SelectApplicationScenario from '@/components/select-application-scenario'

export default {
  name: 'AlarmScheme',
  components: { AddButton, SelectApplicationScenario },
  data() {
    return {
      formData: {
        keyword: '',
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
      updateGroup: {},
      tableData: [],
      loading: false,
      dialogVisible: false,
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      this.findGroupPageByParam()
    },
    handleEdit(group) {
      this.$router.push({ path: '/device/device-group-detail', query: { id: group.id } })
    },
    handleDelete(group) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        apiDelGroupById(group.id).then(() => {
          this.$message.success('删除成功')
        })
        await this.findGroupPageByParam()
      })
    },

    handlePageNoChange(pageNo) {
      this.formData.pageNo = pageNo
      this.findGroupPageByParam()
    },

    async findGroupPageByParam() {
      this.loading = true
      try {
        const { total, records } = await apiFindGroupPageByParam(this.formData)
        this.formData.total = total
        this.tableData = records
      } catch (e) {
        this.$message.error(e)
      }
      this.loading = false
    },

    handleChange(data) {
      this.findGroupPageByParam()
    },
  },
}
</script>

<style scoped lang="scss">
.btn-edit {
  color: #0084ee;

  &:hover {
    cursor: pointer;
    opacity: 0.7;
  }
}

.btn-delete {
  color: #d12d1f;

  &:hover {
    cursor: pointer;
    opacity: 0.7;
  }
}
</style>
